<%--
  Created by IntelliJ IDEA.
  User: soldi
  Date: 2024/8/31
  Time: 19:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>个人中心</title>
    <link href="${pageContext.request.contextPath}/admin/css/styles.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/indexFace/css/me.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/admin/js/all.js"></script>
</head>
<body class="sb-nav-fixed">
<%@ include file="include/head.jsp" %>
<div id="layoutSidenav">
    <%@ include file="include/nav.jsp" %>
    <div id="layoutSidenav_content">
        <div class="container-fluid px-4">
            <div class="card mb-4">
                <div id="me" class="card-body">
                    <form action="${pageContext.request.contextPath}/editme" method="POST">
                        <label class="info-class"></label>
                        <div class="user-info-row enlarged-font">
                            <p class="info-item-first">
                                <label for="name" class="item-label"></label>
                                <span id="name">{{ info.name }}</span>
                            </p>
                        </div>
                        <hr>

                        <label class="info-class">学籍信息</label>
                        <div class="user-info-row">
                            <p class="info-item-first">
                                <label for="userID" class="item-label">学号: </label>
                                <span id="id">{{ info.userID }}</span>
                                <input id="userID" name="userID" type="text" v-model="info.userID" hidden="hidden">
                            </p>
                        </div>

                        <label class="info-class">个人信息</label>
                        <div class="user-info-row">
                            <p class="info-item-first">
                                <label class="item-label">性别: </label>
                                <input type="radio" id="male" name="sex" value="男" v-model="info.sex">
                                <label for="male">男</label>
                                <input type="radio" id="female" name="sex" value="女" v-model="info.sex">
                                <label for="female">女</label>
                            </p>

                            <p class="info-item-second">
                                <label for="role" class="item-label">职位: </label>
                                <input id="role" type="text" name="role" v-model="info.role" disabled>
                            </p>
                        </div>

                        <label class="info-class">联系方式</label>
                        <div class="user-info-row">
                            <p class="info-item-first">
                                <label for="mailbox" class="item-label">邮箱: </label>
                                <input id="mailbox" type="text" name="mailbox" v-model="info.mailbox">
                            </p>
                            <p class="info-item-second">
                                <label for="phone" class="item-label">电话号码: </label>
                                <input id="phone" type="text" name="phone" v-model="info.phone">
                            </p>
                        </div>

                        <label class="info-class">密码</label>
                        <div class="user-info-row">
                            <p class="info-item-first">
                                <label for="password" class="item-label">原密码: </label>
                                <input id="password" type="password" v-model="info.password" disabled>
                            </p>
                            <p class="info-item-first">
                                <label for="newpwd" class="item-label">新密码: </label>
                                <input id="newpwd" name="newpwd" type="password">
                            </p>
                        </div>

                        <br><input type="submit" value="确定">
                    </form>
                </div>
            </div>
        </div>
        <%@ include file="include/foot.jsp" %>
    </div>
</div>
<script src="${pageContext.request.contextPath}/admin/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/scripts.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/simple-datatables@latest.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/datatables-simple-demo.js"></script>
<script src="${pageContext.request.contextPath}/JavaScript/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    var app = new Vue({
        el: "#me",
        data: {
            info: {
                name: '',
                pwd:'',
                userID: '',
                sex: '',
                mailbox: '',
                phone: '',
                role: ''
            }
        },

        mounted(){
            axios.post('${pageContext.request.contextPath}/me?user_id=${LogUser.getUserID()}')
                .then(response => {
                    this.info = response.data;
                })
        }
    });
</script>

</body>
</html>
